<template>
<div>
<!-- <div style="background-color: #269ABC;"> -->
    <!-- 轮播图 -->
    <div class="swiper-container">
        <swiper ref="mySwiper1" :options="swiperOptions">
            
            <!-- <swiper-slide>
                <div class="slide-wrap" v-for="n in 3">
                    <img src="../../assets/themes/images/test/test'+(n)+'.jpg" alt="">
                </div>
            </swiper-slide> -->
            
            
            
            <swiper-slide>
                <div class="slide-wrap">
                    <img src="../../assets/themes/images/test/test2.jpg" alt="">
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="slide-wrap">
                    <img src="../../assets/themes/images/test/test1.jpg" alt="">
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="slide-wrap">
                    <img src="../../assets/themes/images/test/test3.png" alt="">
                </div>
            </swiper-slide>
            
            
            
            <!-- 分页器-->
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- 滚动条 -->
            <div class="swiper-scrollbar" slot="scrollbar"></div>
            
        </swiper>
        <!-- 导航按钮 -->
        <div class="swiper-button-prev" slot="navigation"></div>
        <div class="swiper-button-next" slot="navigation"></div>
    </div>
    
    <div>
        <div class="nav">
            <ul class="nav-list">
                <!--eslint-disable-next-line-->
                <li class="item" v-for='(item, index) in navList' :class="{'active': nowIndex===index}" @click="tabClick(index)">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="swiper-container">
            <swiper ref="mySwiper2" :options="swiperOptions2">
                <!--eslint-disable-next-line-->
                <swiper-slide v-for="it in navList">
                    <keep-alive>
                        <showdata :name="it.name"></showdata>
                    </keep-alive>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</div>

</template>

<script>
  import showdata from './showdata.vue';
  export default {
    // name="find",
    components:{
        showdata,
        // play,
    },
    name: 'carrousel',
    data() {
        let self = this
        return {
            nowIndex: 0,
            navList: [
                    {name: '热门'},
                    {name: '游玩'},
                    {name: '丽人'},
                    {name: '宠物'},
                    {name: '美食'},
                    {name: '健身'},
                    {name: '购物'},
                ],
            // 轮播图的设置
            swiperOptions: {
                // 鼠标变成小手
                grabCursor : true,
                // 环路
                loop: true,
                autoplay: {
                    disableOnInteraction: false,
                },
                // 分页符
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,
                },
                // 换页按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // 如果需要滚动条
                // scrollbar: {
                //     el: '.swiper-scrollbar',
                //     draggable: true,
                //     dragSize: 50,
                // },
                // 转换效果
                effect : "flip",
                
              // Some Swiper option/callback...
            },
            swiperOptions2: {
                on: {
                    slideChangeTransitionStart: function(){
                        self.tabClick(this.activeIndex)
                    },
                }
            },
        }
    },
    
    computed: {
      swiper1() {
        return this.$refs.mySwiper1.$swiper
      },
      swiper2() {
        return this.$refs.mySwiper2.$swiper
      },
    },
    methods: {
        tabClick(index) {
            this.nowIndex = index
            this.swiper2.slideTo(this.nowIndex, 1000, false)
        },
    },
    mounted() {
      // console.log('Current Swiper instance object', this.swiper1)
      // this.swiper1.slideTo(0, 3000, false)
    },
    
  }
</script>

<style scoped>
    @import "../../assets/themes/css/myslidershow.css";
    .nav {
        /* margin-bottom: 20px; */
        box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.3);
        height:48px;
    }
    .nav .nav-list {
        width: 100%;
        /* overflow: hidden; */
    }
    .nav .nav-list .item {
        width: 14%;
        display: inline-block;
        text-align: center;
        height: 48px;
        line-height: 48px;
    }
    .active {
        background-color: #A6E1EC;
        font-weight: bold;
        color: #FF5151;
        box-shadow: inset 0 0px 5px 0px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
    }
</style>